<template>
<div>

    <form class="card comment-form">
        <div class="card-block">
            <textarea class="form-control" placeholder="Write a comment..." rows="3"></textarea>
        </div>
        <div class="card-footer">
            <img :src="user.image" class="comment-author-img" />
            <button class="btn btn-sm btn-primary">
                Post Comment
            </button>
        </div>
    </form>

    <div class="card" v-for="comment in comments" :key="comment.id">
        <div class="card-block">
            <p class="card-text">{{comment.body}}</p>
        </div>
        <div class="card-footer">
            <nuxt-link :to="{
                name: 'profile',
                params: {
                    username: comment.author.username
                }
            }" class="comment-author">
                <img :src="comment.author.image" class="comment-author-img" />
            </nuxt-link>
            &nbsp;
            <nuxt-link class="comment-author" :to="{
                name: 'profile',
                params: {
                    username: comment.author.username
                }
            }">
                {{ comment.author.username}}
            </nuxt-link>
            <span class="date-posted">{{comment.created | date('MMM DD, YYYY')}}</span>
        </div>
    </div>

</div>
</template>
<script>
import { mapState } from 'vuex'
import { getComments } from '@/api/article'
export default {
    name: 'articleComments',
    props: {
        article: {
            type: Object,
            required: true
        }
    },
    data () {
        return {
            comments: [] //列表
        }
    },
	computed: {
		...mapState(['user'])
	},
    async mounted() {
        const { data } = await getComments(this.article.slug)
        this.comments = data.comments
    }
}
</script>